<template>
  <div class="home">
    <div class="header">
      <div class="top_bj"></div>
      <div class="top_img">
        <!-- <img v-if="!assemblyFlg" src="@/assets/img/top.png" alt=""> -->
        <img src="@/assets/img/top3.png" alt="">
      </div>
    </div>
    <div class="container">
      <div class="cont_left">
        <!-- 模块1 -->
        <Overview ref="OverviewBuildNo" />
        <Maintain ref="MaintainBuildNo" />
        <Warning ref="WarningBuildNo" />
      </div>
      <div class="cont_center">
        <div class="center_info">
          <div class="item">
            <img src="@/assets/img/ll.png" alt="">
            <div class="item_text">
              <h2>水量</h2>
              <h3>{{ infos.avgInstantNum }}m³</h3>
              <!-- <h3><span>123</span> m³/h</h3> -->
            </div>
          </div>
          <div class="item">
            <img src="@/assets/img/yl.png" alt="">
            <div class="item_text">
              <h2>压力</h2>
              <h3>{{ infos.avgPressure }}Mpa</h3>
              <!-- <h3><span>0.632</span>Mpa</h3> -->
            </div>
          </div>
          <div class="item">
            <img src="@/assets/img/sw.png" alt="">
            <div class="item_text">
              <h2>水温</h2>
              <h3>{{ infos.avgTemperature }}°C</h3>
              <!-- <h3><span>17</span>°C</h3> -->
            </div>
          </div>
          <div class="item">
            <img src="@/assets/img/TDS@2x.png" alt="">
            <div class="item_text">
              <h2>TDS</h2>
              <h3>{{ infos.avgTds }}PPM</h3>
              <!-- <h3><span>176</span>PPM</h3> -->
            </div>
          </div>
        </div>
        <div class="videoBox">
          <div class="iframe_cont">
            <iframe class="pump_map" v-show="assemblyFlg" src="https://www.thingjs.com/s/ce6222afb0994dc155c68eb6"
              frameborder="0"></iframe>
            <iframe class="pumpInfo_map" v-if="!assemblyFlg" src="https://www.thingjs.com/s/beede1dbfb3bc869add3c608"
              frameborder="0"></iframe>
          </div>
        </div>
        <Buttons v-if="assemblyFlg" @btnClicks="btnClick" />
        <Operation v-if="!assemblyFlg" @getNext="next" ref="operationRef" :buildNo="buildNo" />
        <!-- <House /> -->
      </div>
      <div class="cont_right">
        <Monitor ref="MonitorBuildNo" />
        <Loss ref="LossBuildNo" />
        <AlarmList ref="AlarmListBuildNo" />
      </div>
    </div>
    <div class="return_page" v-if="!assemblyFlg" @click="return_page">
      <img src="@/assets/img/returnn.png" alt="">
      <h2>返回</h2>
    </div>
  </div>
</template>

<script>

import * as api from '@/assets/utils/api.js'
import Overview from '@/views/Home/overview.vue'
import Maintain from '@/views/Home/maintain.vue'
import Warning from '@/views/Home/warning.vue'
import Loss from '@/views/Home/loss.vue'
import Monitor from '@/views/Home/monitor.vue'
import AlarmList from '@/views/Home/alarmList.vue'
import Buttons from '@/views/Assembly/buttons.vue'
import Operation from '@/views/Assembly/operation.vue'

export default {
  name: 'Home',
  components: {
    Overview,
    Maintain,
    Warning,
    Loss,
    Monitor,
    AlarmList,
    Buttons,
    Operation
  },
  data() {
    return {
      data: [],
      tenantid: 1128,
      community: 1,
      buildNo: '',
      assemblyFlg: true,
      room_charts: [],
      objId: {},
      clickFlg: 0,
      alertFlg: false,
      listData: [],
      buildNo2: '',
      clientType: '',
      maxTower: '',
      infos: [],
      btns: [
        {
          startImg: new URL('../../assets/img/qbyh.png', import.meta.url).href,
          activeImg: new URL('../../assets/img/qbyha.png', import.meta.url).href
        },
        {
          startImg: new URL('../../assets/img/ycyhs.png', import.meta.url).href,
          activeImg: new URL('../../assets/img/ycyha.png', import.meta.url).href
        },
        {
          startImg: new URL('../../assets/img/dbh.png', import.meta.url).href,
          activeImg: new URL('../../assets/img/dbha.png', import.meta.url).href
        },
        {
          startImg: new URL('../../assets/img/sbz.png', import.meta.url).href,
          activeImg: new URL('../../assets/img/sbza.png', import.meta.url).href,
        },
        {
          startImg: new URL('../../assets/img/gglr.png', import.meta.url).href,
          activeImg: new URL('../../assets/img/gglra.png', import.meta.url).href
        },
        {
          startImg: new URL('../../assets/img/kzf.png', import.meta.url).href,
          activeImg: new URL('../../assets/img/kzfa.png', import.meta.url).href
        }
      ]
    }
  },
  created() {
    this.getData()
    // console.log(res)

    window.addEventListener('message', async(dt) => {
      if (dt.data?.msg == 'jump_building') {
        // pumpId = dt.data.id
        this.buildNo = dt.data.buildNo
        // this.buildNo2 = dt.data.buildNo
        this.getData()
        this.assemblyFlg = false
        this.$store.commit('buildingFlg', true)
        this.changeRef(dt.data.buildNo)
      }

      if (dt.data?.msg == 'get_map_data') {
        const res = await api.listData({ tenantid: this.tenantid, community: this.community, buildNo: this.buildNo })
        document.querySelector('.pump_map').contentWindow.postMessage({ msg: 'set_map_data', data: res.data }, 'https://www.thingjs.com')
      }

      if (dt.data?.msg == 'get_floor_data') {
        document.querySelector('.pumpInfo_map').contentWindow.postMessage({ msg: 'set_floor_data', floor: this.maxTower }, 'https://www.thingjs.com')
      }
    })

  },
  mounted() {
  },
  methods: {
    changeRef(buildNo) {
      this.$nextTick(() => {
        this.$refs.OverviewBuildNo.changeBuildNo(buildNo)
        this.$refs.MaintainBuildNo.changeBuildNo(buildNo)
        this.$refs.WarningBuildNo.changeBuildNo(buildNo)
        this.$refs.MonitorBuildNo.changeBuildNo(buildNo)
        this.$refs.LossBuildNo.changeBuildNo(buildNo)
        this.$refs.AlarmListBuildNo.changeBuildNo(buildNo)
      })
    },
    async getData() {
      const res = await api.listData({ buildNo: this.buildNo, clientType: this.clientType })
      this.listData = res.data
      this.maxTower = this.listData.infoS[0].maxTower
      this.infos = this.listData.infoS[0]
      this.$store.commit('getListData', res.data)
      this.$store.commit('changeMaxTower', this.maxTower)
      this.abnormalUser()
    },
    // 异常用户的数据
    async abnormalUser() {
      const res = await api.listData({ buildNo: this.buildNo2, clientType: this.clientType })
      let listData = res.data
      let newArr = []
      for (let i in listData.infoS) {
        if (listData.infoS[i].alarmCount > 0) {
          newArr.push(listData.infoS[i].alarmAddress)
        }
      }
      newArr = newArr.filter(item => item)
      // console.log(newArr)
      this.$store.commit('abnormal', newArr)
      this.$store.commit('nextFlgs',true)
    },
    // 返回页面
    return_page() {
      this.buildNo = ''
      this.getData()
      this.assemblyFlg = !this.assemblyFlg
      this.$store.commit('buildingFlg', false)
      this.changeRef('')
      this.abnormalUser()
    },
    // 按钮点击
    async btnClick(clientType, index) {
      document.querySelectorAll('.btn_item img').forEach((item, index2) => {
        item.src = this.btns[index2].startImg
      })
      document.querySelectorAll('.btn_item img')[index].src = this.btns[index].activeImg
      // document.querySelector('.pump_map').contentWindow.postMessage({ msg: 'filter_data', type: clientType }, 'https://www.thingjs.com')
      document.querySelector('.pump_map').contentWindow.postMessage({ msg: 'destroy_all' }, 'https://www.thingjs.com')
      let res = []
      if(index == 1){
        res = await api.listData({ buildNo: this.buildNo2, clientType: 6 })
        res.data.infoS = res.data.infoS.filter(item=> item.alarmCount > 0)
      }else{
        res = await api.listData({ buildNo: this.buildNo2, clientType })
      }
      // console.log(index)
      document.querySelector('.pump_map').contentWindow.postMessage({ msg: 'filter_data', data: res.data }, 'https://www.thingjs.com')
    },
    next(num, colors) {
      document.querySelector('.pumpInfo_map').contentWindow.postMessage({ msg: 'jump_to', floor: num, color: colors }, 'https://www.thingjs.com')
    }
  }
}
</script>

<style lang="scss" scoped>
.home {
  background-color: #031a44;
  // background: url(@/assets/img/鹰潭爱心园-小区图.png) no-repeat center;
  background-size: 100% 100%;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;

  // opacity: 0.8;
  .header {
    width: 100%;
    height: 0.75rem;
    position: relative;
    z-index: 1;
    background: url(@/assets/img/topTitle.png) no-repeat center;
    background-size: 100% 100%;

    .top_bj {
      width: 100%;
      height: 48%;
      // background: linear-gradient(90deg, #061444 0%, #588FFB 50%, #061446 100%);
      // opacity: 0.1;
    }

    .top_img {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      display: flex;

      img {
        width: 5.6rem;
        height: 8%;
      }
    }
  }

  .container {
    // width: 100%;
    height: 92%;
    display: flex;
    justify-content: space-between;
    padding: 0 .2rem;
    position: relative;
    top: -20px;

    .cont_left {
      width: 25.5%;
      height: 100%;
      z-index: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .cont_center {
      width: 47%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;

      .return {
        position: absolute;
        right: 2%;
        top: 0;
        display: flex;
        cursor: pointer;
        z-index: 100;

        i {
          font-size: 0.5rem;
          color: #fff;
        }
      }

      .center_info {
        height: 12%;
        // padding: 0 .62rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 1;
        pointer-events: none;

        .item {
          width: 28%;
          display: flex;
          justify-content: center;
          padding-top: .35rem;

          img {
            width: 30%;
            height: 100%;
            // padding: 9px 19px 0 11px;
          }

          .item_text {
            h2 {
              font-size: 0.18rem;
              color: #fff;
              padding: 0.2rem 0 0.05rem 0;
            }

            h3 {
              font-size: 0.25rem;
              font-family: 'arial';
              font-weight: bold;
              color: #46EDE8;

              span {
                font-size: 0.32rem;
              }
            }
          }

          &:nth-child(1) {
            img {
              // padding: 3px 16px 0 8px;
            }
          }

          &:nth-child(2) {
            h3 {
              color: #46A0FF;
            }

            img {
              // padding: 4px 19px 0 0;
            }
          }

          &:nth-child(3) {
            img {
              // padding: 4px 13px 0 0;
            }

            h3 {
              color: #45FF82;
            }
          }

          &:nth-child(4) {
            img {
              // padding: 4px 13px 0 0;
            }

            h3 {
              color: #d5bb40;
            }
          }
        }
      }

      .videoBox {
        width: 100%;
        height: 46.9%;

        .iframe_cont {
          width: 100%;
          height: 100%;

          iframe {
            width: 100vw;
            height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            // z-index: 100;
          }
        }
      }
    }

    .cont_right {
      width: 25.5%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }

  .return_page {
    position: absolute;
    right: 1%;
    top: 0.5%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 0.76rem;
    height: 0.28rem;
    background: rgba(50, 79, 143, 0.3600);
    border: 1px solid #436FCE;
    border-radius: 2px;
    cursor: pointer;
    z-index: 100;

    img {
      width: 0.14rem;
      margin-right: 0.05rem;
    }

    h2 {
      font-size: 0.14rem;
      background: linear-gradient(0deg, #CEF3FF 0%, #6CDBFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
}
</style>
